<template>
  <div class="wraper-center">
    <div class="crumbs">
      <a href="/">首页</a>
      <span>&gt;</span>
      <a :href="`/list?typePid=${articleDetail.type_pid}`">
        {{ articleDetail.type_pname }}
      </a>
      &gt;
      <a :href="`/list?typeId=${articleDetail.type_id}`">
        {{ articleDetail.type_name }}
      </a>
      &gt;
      <span>
        查看内容
      </span>
    </div>
    <div class="w-con clearfix">
      <div class="w-left">
        <div class="article-wraper">
          <h1 class="tit">
            {{ articleDetail.title }}
          </h1>
          <div class="info color-s">
            <span>
              {{ articleDetail.create_time }}
            </span>
            <span class="line">|</span>
            <span>
              来自：本站原创
            </span>
          </div>
          <!-- <div class="description">
            {{ articleDetail.description }}
          </div> -->
          <div
            class="content"
            v-html="articleDetail.content"
          />
        </div>
      </div>
      <div class="w-right">
        <div class="card">
          <h2 class="tit">
            相关分类
          </h2>
          <ul class="xgfl-items clearfix">
            <li
              v-for="(item, index) in sortLst"
              :key="index"
              class="xgfl-item"
            >
              • <a
                :href="`/list?typePid=${item.type_pid}&typeId=${item.type_id}`"
                :title="item.type_name"
              >{{ item.type_name }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail, getSonType } from '@/api/article'

export default {
  name: 'List',
  components: {
  },
  layout: 'default',
  async fetch({ store, params }) {
  },
  async asyncData({ store, params, query, error }) {
    const id = query.id || ''
    const articleDetail = await getDetail({
      id
    }).then(response => {
      return response.data.item
    }).catch(err => {
      err
      error({ statusCode: 500, message: '应用程序错误' })
    })
    const sortLst = await getSonType({
      typePid: articleDetail.type_pid
    }).then(response => {
      return response.data.lstItem
    }).catch(err => {
      err
      error({ statusCode: 500, message: '应用程序错误' })
    })
    return {
      articleDetail,
      sortLst
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.article-wraper{
  .tit{
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    padding: 15px 0 15px;
  }
  .info{
    text-align: center;
    padding-bottom: 15px;
    .line{
      font-size: 12px;
      margin: 0 10px;
    }
  }
  .desc{
    text-indent: 2em;
  }
  .content{
    border-top: 1px solid #e6e6e6;
    padding: 20px;
    line-height: 1.8em;
    /deep/ font{
      color: #333;
    }
    /deep/ strong{
      font-weight: bold;
    }
    /deep/ p{
      margin: 20px 0;
      // text-indent: 2em;
    }
  }
}
</style>
